/** 报名 */
import React, { useState, useEffect } from 'react';
import {
  Form,
  Row,
  Col,
  Input,
  DatePicker,
  Button,
  Space,
  Upload,
  Select,
} from 'antd';
import {
  CaretUpOutlined,
  CaretDownOutlined,
  MinusCircleOutlined,
  PlusOutlined,
} from '@ant-design/icons';
const { RangePicker } = DatePicker;
const { Option } = Select;

export default function Apply({ voteForm, voteWay }) {
  const [hidden, setHidden] = useState(false);
  const [selectItem, setSelectItem] = useState();
  /** select  */
  const optionChange = (value) => {
    setSelectItem(value);
  };

  const normFile = (e) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };
  useEffect(()=>{
    setSelectItem(voteWay)
  }, [])
  return (
    <>
      <section
          style={{
          display: 'flex',
          justifyContent: 'space-between',
          marginTop: 30,
        }}
      >
        <b style={{ fontSize: 18 }}>投票</b>
        {!hidden ? (
          <div onClick={() => setHidden(false)}>
            展开 <CaretDownOutlined />
          </div>
        ) : (
          <div onClick={() => setHidden(true)}>
            收起 <CaretUpOutlined />
          </div>
        )}
      </section>
      {hidden ? (
        ''
      ) : (
        <div style={{ marginTop: 20 }}>
          <Form form={voteForm}
              layout="vertical"
          >
            <Row style={{ marginBottom: 20 }}>
              <Col span={24}>
                <span
                    style={{
                    paddingLeft: 15,
                    borderLeft: '5px solid #202a7d',
                    fontSize: 16,
                    fontWeight: 700,
                  }}
                >
                  基本信息
                </span>
              </Col>
            </Row>
            <Row style={{ background: '#f3f4f7', padding: 20 }}>
              <Col span={12}>
                <Form.Item
                    label="活动时间"
                    name="activityTime"
                    rules={[{ required: true, message: '请输入活动时间' }]}
                >
                  <RangePicker showTime />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                    label="投票方式"
                    name="voteWay"
                    rules={[{ required: true, message: '请选择投票方式' }]}
                >
                  <Select onChange={optionChange}
                      style={{ width: '50%' }}
                      value={selectItem}
                  >
                    <Option value={1}>只可投一次</Option>
                    <Option value={2}>每日均可投</Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>

            {selectItem == 2 ? (
              <Row style={{ background: '#f3f4f7', padding: 20 }}>
                <Col span={12}>
                  <Form.Item
                      label="单日可投上限"
                      name="dayVoteLimit"
                      rules={[{ required: true, message: '请输入单日投票上限' }]}
                  >
                    <Input
                        placeholder="请输入1~99999999的整数"
                        style={{ width: '50%' }}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                      label="重复投票上限"
                      name="singlePlayerLimit"
                      rules={[
                      { required: true, message: '请输入重复投票的上限' },
                    ]}
                  >
                    <Input
                        placeholder="请输入1~99999999的整数"
                        style={{ width: '50%' }}
                    />
                  </Form.Item>
                </Col>
              </Row>
            ) : (
              ''
            )}

            <Row style={{ margin: '10px 0' }}>
              <Col span={24}>
                <span
                    style={{
                    paddingLeft: 15,
                    borderLeft: '5px solid #202a7d',
                    fontSize: 16,
                    fontWeight: 700,
                  }}
                >
                  投票对象
                </span>
              </Col>
            </Row>

            <Row style={{ background: '#f3f4f7', padding: 20 }}>
              <Col span={12}>
                <Form.Item
                    label="名称"
                    name="name"
                    rules={[{ required: true, message: '请输入名称' }]}
                >
                  <Input
                      placeholder="请输入投票对象的名称"
                      style={{ width: '50%' }}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="说明"
                    name="instructions"
                >
                  <Input
                      placeholder="请输入投票对象的说明"
                      style={{ width: '50%' }}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                    getValueFromEvent={normFile}
                    label="图片"
                    name="picturePic"
                    rules={[
                    {
                      required: true,
                      message: '请选择缩略图',
                    },
                  ]}
                    valuePropName="fileList"
                >
                  <Upload
                      action="/campus/campusweb/upload/pictureUpload"
                      listType="picture-card"
                      name="multipartFile"
                  >
                    {'+ Upload'}
                  </Upload>
                </Form.Item>
              </Col>
            </Row>

            <Row style={{ background: '#f3f4f7', padding: 20 }}>
              <Col span={24}>
                <Form.List name="voteObjectVOS">
                  {(fields, { add, remove }) => (
                    <>
                      {fields.map(({ key, name, ...restField }) => (
                        <Space
                            align="baseline"
                            key={key}
                            style={{ display: 'flex', marginBottom: 8 }}
                        >
                          <Row>
                            <Col span={24}>
                              <Form.Item
                                  {...restField}

                                  label="名称"
                                  name={[name, 'name']}
                                  rules={[
                                  {
                                    required: true,
                                    message: '请输入名称',
                                  },
                                ]}

                              >
                                <Input placeholder="请输入项目的名称, 如爱好" />
                              </Form.Item>
                            </Col>
                            <Col span={24}>
                              <Form.Item
                                  label="说明"
                                  {...restField}
                                  name={[name, 'instructions']}
                              >
                                <Input placeholder="请输入投票对象的说明" />
                              </Form.Item>
                            </Col>
                            <Col span={20}>
                              <Form.Item
                                  getValueFromEvent={normFile}
                                  label="图片"
                                  name={[name, 'picturePic']}
                                  rules={[
                                  {
                                    required: true,
                                    message: '请选择图片',
                                  },
                                ]}
                                  valuePropName="fileList"
                              >
                                <Upload
                                    action="/campus/campusweb/upload/pictureUpload"
                                    listType="picture-card"
                                    name="multipartFile"
                                >
                                  {'+ Upload'}
                                </Upload>
                              </Form.Item>
                            </Col>
                          </Row>
                          <MinusCircleOutlined onClick={() => remove(name)} />
                        </Space>
                      ))}
                      <Form.Item>
                        <Button
                            block
                            icon={<PlusOutlined />}
                            onClick={() => add()}
                            style={{ width: '40%' }}
                            type="dashed"
                        >
                          Add field
                        </Button>
                      </Form.Item>
                    </>
                  )}
                </Form.List>
              </Col>
            </Row>
          </Form>
        </div>
      )}
    </>
  );
}
